<template>
  <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
    <el-row>
      <el-col :span="12">
        <el-form-item label="申报奖项" prop="awardApplyName">
          <SelectOption :selectValue="ruleForm.awardApplyName" disabled :options="options.unitnameList"
            @change-value="changeValue"> </SelectOption>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报人" prop="applyUser">
          <!-- <SelectOption :selectValue="ruleForm.applyUser" :options="options.userAllList" @change-value="changeValue5">
          </SelectOption> -->
          <user-list-modal
            v-model="ruleForm.applyUser"
            @update:modelValue="changeValue5"
            :default-users="[]"
            :multiple="false"
            :devType="'platform'"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="申报类型" prop="applyClass">
          <SelectOption :selectValue="ruleForm.applyClass" disabled :options="options.gldxList"  
            @change-value="changeValue2">
          </SelectOption>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报单位" prop="applyUnitName">

          <popup-tree-input :data="orgAllList" :props="deptForm.popupTreeProps" :prop="deptForm.parentName == null
                          ? $t('message.org.top_menu')
                          : ruleForm.applyUnitName
                        " :node-key="'' + deptForm.parentId" :current-change-handle="changeValue1" />

          <!-- <SelectOption :selectValue="ruleForm.applyUnitName" :options="options.orgAllList" @change-value="changeValue1">
          </SelectOption> -->
        </el-form-item>
      </el-col>

      <!-- <el-col :span="12">
        <el-form-item label="关联类型">
          <SelectOption :selectValue="ruleForm.relateName" :options="options.gldxList" @change-value="changeValue3">
          </SelectOption>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="关联对象">
          <SelectOption :selectValue="ruleForm.relateName" :disabled="data.addFlag" :options="options.dxxqList"
            @change-value="changeValue4">
          </SelectOption>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目名称" prop="projectName">
          <el-input placeholder="如果关联对象自动带出，可编辑" v-model="ruleForm.projectName" style="width:100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目编号" prop="projectNo">
          <el-input placeholder="如果关联对象自动带出，可编辑" v-model="ruleForm.projectNo" style="width:100%" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="项目简介" prop="shortIntroduction">
        <el-input :style="{ width: '680px' }" v-model="ruleForm.shortIntroduction" :autosize="{ minRows: 2, maxRows: 6 }"
          type="textarea" placeholder="请输入" />
      </el-form-item>

      <el-form-item label="申报单位意见" prop="unitRemark">
        <el-input :style="{ width: '680px' }" v-model="ruleForm.unitRemark" :autosize="{ minRows: 2, maxRows: 6 }"
          type="textarea" placeholder="请输入" />
      </el-form-item>

    </el-row>
  </el-form>

  <!-- <el-dialog v-model="data.dialogVisible" width="40%" top="17vh" :show-close="false" :close-on-click-modal="false">
    <template #title>
      <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
          <el-tab-pane :label="data.title" name="first" v-if="data.dialogVisible">
            <SelectOption :options="options.dxxqList" @change-value="changeValue4">
            </SelectOption>
          </el-tab-pane>
        </el-tabs>
        <div class="handle">
          <el-button color="#626aef" @click="data.dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="data.dialogVisible = false">关联</el-button>
        </div>
      </div>
    </template>
  </el-dialog> -->
</template>

<script lang="ts">
import UserListModal from '@/views/project/components/UserListModal/index.vue';
import Api from '@/views/science/api/awards';
import { getDetailById, getTable } from "@/views/science/api/patent";
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
import SelectOption from '@/views/science/components/selectOption/index.vue';
import Table from '@/views/science/components/table/table.vue';
import { computed, reactive, ref, watch, watchEffect } from 'vue';
import { useStore } from 'vuex';
export default {
  components: {
    SelectOption,
    Table,
    UserListModal,
    PopupTreeInput
  },

  emits: {
    valueFlag: null,
    awardType: null,
  },
  props: {
    addFlag: {
      type: Number,
    },

    orgAllList: {
      type: Array,
      required: true,
    },

  },
  setup(props, { emit }) {

    const deptForm = {
      parentId: 0,
      parentName: '',
      popupTreeProps: {
        label: 'name',
        children: 'children',
        value: 'id',
        checkStrictly: true,
      },
    }

    const store = useStore() // 获取vuex的数据
    const labelPosition = ref('right')  // 表单label位置

    const data = reactive({
      activeName: ref('first'),  // 弹窗中的tab切换
      dialogVisible: false,
      isFlag: false,

      title: '',
      page: { page: 1, limit: 10, total: 0 },
      ids: [],
      params: {
        current: 1,
        id: "",
        name: "",
        size: 10
      },
      allTableData: [],
      columns: [
        {
          key: 'name',
          width: 140,
          label: '合同名称',
        },
        {
          key: 'changeTime',
          width: 140,
          label: '合同编号',
        },
        {
          key: 'changeNode',
          width: 140,
          label: '项目名称',
        },
        {
          key: 'changeBefore',
          width: 140,
          label: '起止时间',
        },
        {
          key: 'changeAfter',
          width: 140,
          label: '项目负责人',
        },
      ],
      addFlag: computed(() => store.state.technologyStrength.addFlag),

      awardSelect: {
        sbjx: null,
        sblx: null,
        pants: null, //附表信息-科技创新成果奖-科学奖项
        patents: null, //附表信息-科技创新成果奖-发明专利
        softwarecopyrights: null, //科技创新成果奖-软件著作权
        composition: null, //科技创新成果奖-学术著作
        thesis: null, //科技创新成果奖-学术论文
        technicalnorms: null, //科技创新成果奖-技术标准
        technicalmethods: null, //科技创新成果奖-技术工法
        projects: null, //重大科技项目立项奖
        innovate: null, //创新平台建设奖
      }
    })

    // 弹窗中三个下拉选择
    let options = reactive({
      projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
      // unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),
      userAllList: computed(() => store.state.technologyStrength.userAllList),
      orgAllList: computed(() => store.state.technologyStrength.orgAllList),
      unitnameList: [
        {
          id: 1,
          itemText: '科技创新成果奖',
          itemValue: '1',
        },
        {
          id: 2,
          itemText: '重大科技项目立项奖',
          itemValue: '2',
        },
        {
          id: 3,
          itemText: '创新平台建设奖',
          itemValue: '3',
        },
      ],
      gldxList: [
        {
          id: 1,
          itemText: '科技奖项',
          itemValue: '1',
        },
        {
          id: 2,
          itemText: '发明专利',
          itemValue: '2',
        },
        {
          id: 3,
          itemText: '软件著作权',
          itemValue: '3',
        },
        {
          id: 4,
          itemText: '技术标准',
          itemValue: '4',
        },
        {
          id: 5,
          itemText: '技术工法',
          itemValue: '5',
        },
        {
          id: 6,
          itemText: '学术论著',
          itemValue: '6',
        },
        {
          id: 7,
          itemText: '学术论文',
          itemValue: '7',
        }
      ],
      dxxqList: []
    })

    watchEffect(() => {
      if(props.addFlag == 0){
        Object.keys(data.awardSelect).forEach((key) => {
          data.awardSelect[key] = null
        })
      }
    })

    const ruleForm = reactive(store.state.technologyStrength.achievementINFO)
    watch(ruleForm, (newValue, oldValue) => {
      store.commit('technologyStrength/getachievementINFO', { ...ruleForm })
    });


    const changeValue = (item) => {
      ruleForm.awardApplyName = item.itemText
      ruleForm.awardApplyId = item.itemValue
      data.awardSelect.sbjx = item.id
      emit('awardType', data.awardSelect)
    }
    const changeValue1 = (item) => {
      ruleForm.applyUnitName = item.name
      ruleForm.applyUnitId = item.id
    }
    const changeValue2 = (item) => {
      // console.log('item',item);
      if(item.itemText == "发明专利" ){
        getTable({
          current:1,
          size:999,
          patentId:'',
          patentName: "",
          patentUserName: "",
          patentClassId: '',
        }).then((res) => {
          res.data.data.records.forEach(e => {
            e.name = e.patentName
            e.applyCode = e.applyCode
          });
          ruleForm.applyClass = item.itemText
          ruleForm.applyClassId = item.itemValue
          ruleForm.relatetype = ''
          ruleForm.relatetypeName = ''
          options.dxxqList = res.data.data.records
        });
      }else{
      Api.gldxList({
        relatetype: item.id
      })
        .then((res) => {
          ruleForm.applyClass = item.itemText
          ruleForm.applyClassId = item.itemValue
          ruleForm.relatetype = ''
          ruleForm.relatetypeName = ''
          options.dxxqList = res.data.data
          
          // data.title = item.itemText
          // data.dialogVisible = true
        })
      }

      data.awardSelect.sblx = item.id
      emit('awardType', data.awardSelect)
    }

    const changeValue3 = (item) => {
      console.log(item)
    }

    const changeValue4 = (item) => {
      // console.log('切换关联对象',data.awardSelect.sbjx,data.awardSelect.sblx);
      ruleForm.relateId = item.id
      ruleForm.relateName = item.name
      if (data.awardSelect.sbjx == 1) {
        if (data.awardSelect.sblx == 1) {
          Api.kjjxList(item.id)
            .then((res) => {
              data.awardSelect.pants = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        } else if (data.awardSelect.sblx == 2) {
          // data.awardSelect.patents = res.data.data[0]
          getDetailById(item.applyCode).then(res =>{
            data.awardSelect.patents = res.data.data.baseInfo
            emit('awardType', data.awardSelect)
            // console.log('关联对象2',res.data.data.baseInfo);
          })
          
        } else if (data.awardSelect.sblx == 3) {
          Api.xszzList(item.id)
            .then((res) => {
              data.awardSelect.softwarecopyrights = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        } else if (data.awardSelect.sblx == 4) {
          Api.jsbzList(item.id)
            .then((res) => {
              data.awardSelect.technicalnorms = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        } else if (data.awardSelect.sblx == 5) {
          Api.jsgfList(item.id)
            .then((res) => {
              data.awardSelect.technicalmethods = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        } else if (data.awardSelect.sblx == 6) {
          Api.xslzList(item.id)
            .then((res) => {
              data.awardSelect.composition = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        } else if (data.awardSelect.sblx == 7) {
          Api.xslwList(item.id)
            .then((res) => {
              data.awardSelect.thesis = res.data.data.info
              emit('awardType', data.awardSelect)
            })
        }
      } else if (data.awardSelect.sbjx == 2) {
        // data.awardSelect.projects = res.data.data[0]
      } else if (data.awardSelect.sbjx == 3) {
        // data.awardSelect.innovate = res.data.data[0]
      }
    }

    const changeValue5 = (item) => {
      ruleForm.applyUserId = item.userId
      ruleForm.applyUser = item.cname
    }

    const delectIds = (ids) => {
      data.ids = ids
    }

    const currentChange = (current) => {
      console.log(current)
    }

    // 新增
    const rules = reactive({

      awardApplyName: [
        { required: true, message: '请选择申报奖项', trigger: 'change', },
      ],
      applyUnitName: [
        { required: true, message: '请选择申报单位', trigger: 'change', },
      ],
      applyClass: [
        { required: true, message: '请选择申报类型', trigger: 'change', },
      ],
      projectName: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
      ],
      projectNo: [
        { required: true, message: '请输入项目编号', trigger: 'change', },
      ],
      shortIntroduction: [
        { required: true, message: '请输入项目简介', trigger: 'blur', },
      ],
      unitRemark: [
        { required: true, message: '请输入申报单位意见', trigger: 'blur' },
      ],
    })

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }

    return {
      deptForm,
      submitForm,
      ruleForm,
      rules,
      ruleFormRef,
      labelPosition,
      data,
      options,
      delectIds,
      currentChange,

      changeValue,
      changeValue1,
      changeValue2,
      changeValue3,
      changeValue4,
      changeValue5
    }


  },
}


</script>
<style lang="scss" scoped>
.my-header {
  padding-bottom: 40px;
}

.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.content-box {
  width: 250px;
  height: 33px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select {
  color: #eee;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.mt20 {
  margin-top: 20px;
}

.flex {
  display: flex;
}

.handle {
  position: absolute;
  top: 17px;
  right: 20px;
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 10px;
}
</style>
